<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户登录</title>
    <% include("./layout/css.html"){} %>
    <link rel="stylesheet" href="${ctxPath}/assets/css/login.css"/>
    <style>
        .index-right {
            display: flex;
            align-items:center;
            justify-content: center;
            /*height: 100vh;*/
        }
        .index-right-body {
            margin: 10px;
        }
        .layui-link:hover {
            cursor: pointer;
        }
    </style>
    <script>
        if (window != top)
            top.location.replace(location.href);
    </script>
</head>
<body>
<div class="login-wrapper">
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-fluid">
                <!--<div class="layui-card card-box-shadow">
                    <div class="layui-card-body">
                        <div class="layui-form toolbar">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">集装箱箱号数据库 箱号：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="billOfLading" class="layui-input search_key" type="search" placeholder="提单号" autocomplete="off"/>
                                        &lt;!&ndash;<div class="layui-icon layui-icon-close inputClear_Damon layui-hide"></div>&ndash;&gt;
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn" lay-filter="searchSubmit" id="searchSubmit" lay-submit>
                                        <i class="layui-icon">&#xe615;</i>搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        <table class="layui-table" id="billTable" lay-filter="billTable"></table>
                    </div>
                </div>-->
                <div class="layui-card">
                    <div class="layui-card-header">集装箱箱号数据库</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item layui-row">
                            <div class="layui-inline layui-col-md6">
                                <div class="layui-row layui-col-space2">
                                    <div class="layui-col-sm3">
                                        <label class="layui-form-label layui-form-required">箱号:</label>
                                    </div>
                                    <div class="layui-col-sm6">
                                        <input name="ckName" id="ckName" placeholder="请输入箱号" class="layui-input "
                                               lay-verType="tips" lay-verify="required" type="search" required/>
                                    </div>
                                    <div class="layui-col-sm3">
                                        <button class="layui-btn icon-btn" lay-filter="ckSubmit" id="ckSubmit" lay-submit>
                                            <i class="layui-icon">&#xe615;</i>搜索
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md12">
                                <label class="layui-form-label ">对应数据:</label>
                                <div class="layui-input-block" id="getRes" style="line-height: 36px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 index-right">
            <div class="layui-card index-right-body">
                <div class="layui-card-header">
                    <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;<span id="formTitle">用户登录</span>
                </div>
                <form class="layui-card-body layui-form layui-form-pane" id="userForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-cellphone-fine"></i></label>
                        <div class="layui-input-block">
                            <input name="username" type="text" class="layui-input" placeholder="手机号" value=""
                                   lay-verType="tips" lay-verify="required" required/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                        <div class="layui-input-block">
                            <input name="password" type="password" class="layui-input" placeholder="密码" value=""
                                   lay-verType="tips" lay-verify="required" required/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                        <div class="layui-input-block">
                            <div class="layui-row inline-block">
                                <div class="layui-col-xs7">
                                    <input name="code" type="text" class="layui-input" placeholder="验证码"  value="1"
                                           autocomplete="off" lay-verType="tips" lay-verify="required" required/>
                                </div>
                                <div class="layui-col-xs5" style="padding-left: 10px;">
                                    <img class="login-captcha" src="${ctxPath }/assets/captcha">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <button lay-filter="loginSubmit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
                    </div>
                    <div class="layui-form-item">
                        <!--<a class="layui-link">手机号注册</a>
                        <a class="layui-link pull-right">忘记密码？</a>-->
<!--                        <a class="layui-link pull-right" id="registerCode">没有帐号？我要注册</a>-->
                    </div>
                    <div class="layui-form-item login-other layui-hide">
                        <label>第三方登录</label>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
                    </div>
                </form>
                <form class="layui-card-body layui-form layui-form-pane layui-hide" id="registerForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-cellphone-fine"></i></label>
                        <div class="layui-input-block">
                            <input name="roleIds" value="4" class="layui-hide"/>
                            <input name="unique" id="unique" type="hidden" class="layui-input"/>
                            <input name="name" id="name" type="text" class="layui-input" placeholder="手机号" value=""
                                   lay-verType="tips" lay-verify="required|userNameUnique" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-senior"></i></label>
                        <div class="layui-input-block">
                            <div id="customerXm" class="xm-select-demo"></div>
                            <input name="customerId" id="customerId" type="text" class="layui-hide" placeholder="" value=""
                                   lay-verType="tips" lay-verify="required" autocomplete="off"/>
                            <input name="customerName" id="customerName" type="text" class="layui-hide" placeholder="" value=""
                                   lay-verType="tips" lay-verify="required" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                        <div class="layui-input-block">
                            <input name="nickName" id="nickName" type="text" class="layui-input" placeholder="用户名" value=""
                                   lay-verType="tips" lay-verify="required" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                        <div class="layui-input-block">
                            <input name="password" id="password" type="password" class="layui-input" placeholder="密码" value=""
                                   lay-verType="tips" lay-verify="required" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                        <div class="layui-input-block">
                            <input name="confirmPassword" id="confirmPassword" type="password" class="layui-input" placeholder="确认密码" value=""
                                   lay-verType="tips" lay-verify="required|equalTo" lay-equalTo="#password" autocomplete="off"/>
                            <!--<input name="confirmPassword" type="password" class="layui-input" placeholder="确认密码" value=""
                                   lay-verType="tips" lay-verify="required|equalTo" lay-equalTo="input[name=password]" lay-equalToText="两次密码不一致"/>-->
                        </div>
                    </div>
                    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                        <div class="layui-input-block">
                            <div class="layui-row inline-block">
                                <div class="layui-col-xs7">
                                    <input name="code" type="text" class="layui-input" placeholder="验证码"  value="1"
                                           autocomplete="off" lay-verType="tips" lay-verify="required" required/>
                                </div>
                                <div class="layui-col-xs5" style="padding-left: 10px;">
                                    <img class="login-captcha" src="${ctxPath }/assets/captcha">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <button lay-filter="registerSubmit" class="layui-btn layui-btn-fluid" lay-submit>注 册</button>
                    </div>
                    <div class="layui-form-item">
                        <!--<a class="layui-link">手机号注册</a>
                        <a class="layui-link pull-right">忘记密码？</a>-->
                        <a class="layui-link pull-right" id="comeBack">返回</a>
                    </div>
                    <div class="layui-form-item login-other layui-hide">
                        <label>第三方登录</label>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="login-footer">
        <p>© 2020 <a href="javascript:void(0);" target="_blank">宁波七洲物流 版权所有</a><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33021202001366" target="_blank"><img src="${ctxPath}/assets/images/beian.png" />浙公网安备 33021202001366号</a><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">浙ICP备20016099号-1</a></p>
        <p><span><a href="javascript:void(0);" target="_blank">技术支持 宁波永恒的鸟笼软件信息有限公司</a></span></p>
    </div>
</div>

<!--  js部分 -->
<% include("./layout/js.html"){} %>
<script type="text/javascript" src="${ctxPath}/assets/js/verification.js"></script>

<script>
    layui.use(['layer', 'form','formX', 'tableX', 'table', 'index', 'xmSelect', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var index = layui.index;
        var formX = layui.formX;
        var table = layui.table;
        var admin = layui.admin;
        var xmSelect  = layui.xmSelect ;
        var tableX = layui.tableX;

        $("#ckSubmit").click(function(){
            $("#ckName").val($("#ckName").val().toUpperCase());
            let ck_txt = $("#ckName").val();
            if(ck_txt != "") {
                let cntr = GetCntr(ck_txt);
                if(cntr != "" && cntr != undefined) {
                    console.log(cntr)
                    $("#getRes").html(cntr);
                } else {
                    console.log(1)
                    $.ajax({
                        url: '../apint/bill/calcBoxes',// 这里写你要验证的地址哦。
                        type:"post",
                        data: { //要提交到服务端验证的用户名
                            ckName: ck_txt
                        },
                        dataType: 'html',
                        success: function(res) { //栗子，返回的数据结果：{"rel":true,"message":"用户名已存在！"}
                            if(countSubstr(res, "重量:X$")) {
                                $("#getRes").html("错误代码02");//：列表内重量X的数据
                            } else if(countSubstr(res, "^箱型:X")) {
                                $("#getRes").html("错误代码02");//：列表内重量X的数据
                            } else {
                                $("#getRes").html(res);
                            }
                        }
                    });
                }
            }
        })
        function countSubstr(str, substr) {
            let reg = new RegExp(substr, "g");
            return str.match(reg) ? str.match(reg).length : 0;//若match返回不为null，则结果为true，输出match返回的数组(["test","test"])的长度
        }
        $("#registerCode").click(function() {
            $("#formTitle").html("用户注册");
            $("#userForm").addClass("layui-hide")
            $("#registerForm").removeClass("layui-hide")
            $("#name").val('')
            $("#nickName").val('')
            $("#password").val('')
            $("#confirmPassword").val('')
        })
        $("#comeBack").click(function() {
            $("#formTitle").html("用户登录");
            $("#userForm").removeClass("layui-hide")
            $("#registerForm").addClass("layui-hide")
        })

        let customerXm = xmSelect.render({
            el: '#customerXm',
            radio: true,
            clickClose: true,
            // toolbar: {show: true},
            data: [],
            layVerify: 'required',
            layVerType: '公司名称不能为空',
            on: function (data) {
                //arr:  当前多选已选中的数据
                var arr = data.arr;
                //change, 此次选择变化的数据,数组
                var change = data.change;
                //isAdd, 此次操作是新增还是删除
                var isAdd = data.isAdd;
                //这种方法第一次取不到值
                // console.log(change,customerXm.getValue("valueStr"), customerXm.getValue("nameStr"))
                if(isAdd) {
                    $("#customerId").val(change[0].value)
                    $("#customerName").val(change[0].name)
                } else{
                    $("#customerId").val('')
                    $("#customerName").val('')
                }
                // form.render()
            },
        })

        admin.req('../apint/bill/customerListAll', {
        }, function(res){
            const customerXmData = res.map((v, index, arr) => {
                return {'name': v.name, 'value': v.id}
            })
            customerXm.update({
                data: customerXmData,
                autoRow: true,
            })
        }, 'post');

        /* layer.open({
             type: 1,
             title: false,
             shade: 0,
             offset: '30px',
             content: '<div style="padding: 15px;">演示系统手机号：admin  密码：admin</div>'
         });*/
        // 渲染表格
        let insTb = tableX.render({
            elem: '#billTable'
            ,url: '../apint/bill/list'
            ,page: false
            ,toolbar: false
            ,cellMinWidth: 100
            ,cols: [[
                ,{field: "id", minWidth: "60", title: "id", sort: false, hide:true }
                // ,{field: "relUserId", minWidth: "60", title: "运单关联用户id", sort: false, hide:false }
                ,{field: "score", minWidth: "60", width: "60", title: "评分", sort: false, hide:false, templet: function (d) {
                        if(d.score) {
                            let scoreColor = parseFloat(d.score) >= 60? 'green': 'red';
                            const score = '<span style="color: ' + scoreColor + '">' + d.score + '</span>'
                            return score;
                        } else {
                            return ''
                        }
                    }
                }
                ,{field: "packDate", minWidth: "60", width: "120", title: "做箱日期", sort: false, hide:false }
                ,{field: "billOfLading", minWidth: "60", width: "150", title: "提单号", sort: false, hide:false }
                ,{field: "vessel", minWidth: "60", width: "130", title: "船名", sort: false, hide:false }
                ,{field: "voyage", minWidth: "60", width: "80", title: "航次", sort: false, hide:false }
                ,{field: "boxType", minWidth: "60", width: "70", title: "箱型", sort: false, hide:false }
                ,{field: "factoryAddress", minWidth: "60", width: "300", title: "工厂地址", sort: false, hide:false }
                ,{field: "customer", minWidth: "60", width: "105", title: "客户名称", sort: false, hide:false }
                ,{field: "contactsPhone", minWidth: "60", width: "117", title: "联系电话", sort: false, hide:true }
                ,{field: "boxNum", minWidth: "60", width: "130", title: "箱号", sort: false, hide:false }
                ,{field: "sealno", minWidth: "60", width: "140", title: "封号", sort: false, hide:false }
                ,{field: "weight", minWidth: "60", width: "100", title: "箱门重量", sort: false, hide:false }
                ,{field: "serialno", minWidth: "60", width: "94", title: "序列号", sort: false, hide:false }

            ]]
            ,done: () => {
                $(".layui-table>tbody>tr>td:nth-child(7)>div").addClass("layui-table-cell-damon");
                $(".layui-table>tbody>tr>td:nth-child(9)>div").addClass("layui-table-cell-damon");
            }
        });
        $('.search_key').bind('keypress',function(event){
            if(event.keyCode == "13")
            {
                $("#searchSubmit").click();
            }
        });
        // 搜索
        form.on('submit(searchSubmit)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
        });
        // 表单提交
        form.on('submit(loginSubmit)', function (obj) {
            layer.load(2);
            $.post('login', obj.field, function (res) {
                if (200 == res.code) {
                    layer.msg('登录成功', {icon: 1, time: 1500}, function () {
                        index.clearTabCache();
                        location.replace('./');
                    });
                } else {
                    layer.closeAll('loading');
                    layer.msg(res.msg, {icon: 5});
                    // $('.login-captcha').trigger('click');
                }
            }, 'JSON');
            return false;
        });
        // 表单提交
        form.on('submit(registerSubmit)', function (obj) {
            layer.load(2);
            $.post('register', obj.field, function (res) {
                if (200 == res.code) {
                    layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                        $("#comeBack").click()
                    });
                } else {
                    layer.closeAll('loading');
                    layer.msg(res.msg+',默认密码为123123', {icon: 5});
                    // $('.login-captcha').trigger('click');
                }
            }, 'JSON');
            layer.closeAll('loading');
            return false;
        });
        form.verify({
            userNameUnique: function(value) {
                if($("#unique").val()!="canuse" && $("#unique").val()!=""){
                    return $("#unique").val();
                }
            }
        });
        $("#name").keyup(function(){
            $("button[lay-filter=registerSubmit]").attr({"disabled":"disabled"});
            $.ajax({
                url: '../system/user/userNameUnique',// 这里写你要验证的地址哦。
                type:"post",
                data: { //要提交到服务端验证的用户名
                    name: $("#name").val()
                },
                dataType: 'json',
                success: function(result) { //栗子，返回的数据结果：{"rel":true,"message":"用户名已存在！"}
                    if (result.code==500) {
                        $("#unique").val(result.msg);
                    } else {
                        $("#unique").val("canuse");
                    }
                    $("button[lay-filter=registerSubmit]").removeAttr("disabled");
                }
            });
        });
        // 图形验证码
        $('.login-captcha').click(function () {
            this.src = this.src + '?t=' + (new Date).getTime();
        });
    });
</script>
</body>
</html>